<template>
	<view class="container">
		<myNavbar :scrollTop="scrollTop" class="myNavbar" v-if="!productLoading"></myNavbar>
		<loading-page :show="productLoading"></loading-page>
		<view class="main" :style="{paddingTop:navbarHeight + 'px'}" v-if="!productLoading">
			<view class="content">
				<!-- 轮播图 -->
				<myBanner></myBanner>
				<!-- 金刚区 -->
				<myDistrict></myDistrict>
				<view class="host-main">
					<!-- 视频 -->
					<myVideo></myVideo>
					<!-- 拼团 -->
					<groupBuying></groupBuying>
					<!-- 医美 -->
					<myMedical></myMedical>
					<!-- 品牌 -->
					<myBrand></myBrand>
					<!-- 商品列表 -->
					<productList></productList>
				</view>
			</view>
			<!-- 悬浮窗 -->
			<indexSuspension :scrollTop="scrollTop">
			</indexSuspension>
			<!-- 开屏红包 -->
			<redEnvelope ref="redEnvelope" :activityByScene="activityByScene || null" />
			<!-- 分销等级 -->
			<level-upgrade />
			<!-- 未登录弹窗 -->
			<message-popup ref="messagePopup" />
			<!-- 登录弹框 -->
			<login-message-popup ref="loginMessagePopup" :couponList="couponList || []" />
			<!-- 客服 -->
			<customer-service-suspension></customer-service-suspension>
			<!-- 拼团悬浮窗 -->
			<index-group-buying></index-group-buying>
		</view>
		<tabbar></tabbar>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex'
	import myNavbar from './components/navbar.vue'
	import myTabs from './components/tabs.vue'
	import myBanner from './components/banner.vue'
	import myDistrict from './components/district.vue'
	import groupBuying from './components/group-buying.vue'
	import myVideo from './components/video.vue'
	import myMedical from './components/medical.vue'
	import myBrand from './components/brand.vue'
	import productList from './components/product-list.vue'
	import indexSuspension from './components/index-suspension.vue'
	import redEnvelope from "./components/redEnvelope.vue"
	import indexGroupBuying from './components/index-group-buying.vue'
	export default {
		components: {
			myNavbar,
			myTabs,
			myBanner,
			myDistrict,
			groupBuying,
			myVideo,
			myMedical,
			myBrand,
			productList,
			indexSuspension,
			redEnvelope,
			indexGroupBuying
		},
		data() {
			return {
				scrollTop: 0,
			}
		},
		onLoad(e) {
			uni.hideTabBar({
				success: () => {},
				fail: (ex) => {
					console.log(ex)
					// 捕获报错，防止没有tabbar页面调用后控制台报错
				},
			})
			if (e.parent_id) {
				uni.setStorageSync('parent_id', e.parent_id)
			}
			this.refreshPage()
		},
		computed: {
			...mapState({
				navbarHeight: (state) => state.index.navbarHeight,
				loadMoreStatus: (state) => state.index.loadMoreStatus,
				total: (state) => state.index.total,
				productList: (state) => state.index.productList,
				productLoading: (state) => state.index.productLoading,
				page: (state) => state.index.page,
				activityByScene: (state) => state.index.activityByScene,
				couponList: (state) => state.index.couponList,
				systemConfig: state => state.init.systemConfig,
				isLogin: state => state.user.isLogin,
				userInfo: state => state.user.userInfo,
			}),
		},
		watch: {
			productLoading: {
				handler(newVal) {
					if (this.systemConfig.index_popup_notlogin_status == 1 && !this.isLogin) {
						this.$nextTick(() => {
							if (newVal) return
							// 未登录之后的弹框
							this.$refs.messagePopup.open()
						})
					} else {
						// 登录之后的弹框
						this.$nextTick(() => {
							if (newVal) return
							this.$refs.loginMessagePopup.open()
						})
					}
				},
				immediate: true
			}
		},
		methods: {
			...mapMutations("index", ["setLoadMoreStatus"]),
			...mapActions("index", ["getIndex", "getProductList"]),
			refreshPage() {
				this.getIndex()
			},
			// 上拉加载
			onReachBottom() {
				if (this.total > this.productList.length) {
					let page = this.page
					page++
					this.setLoadMoreStatus(2)
					this.getProductList(page)
				}
			},
		},
		onShareAppMessage() {
			const id = this.userInfo.id || ''
			return {
				path: `/pages/index/index?parent_id=${id}`
			};
		},
		// 分享到朋友圈
		onShareTimeline: function(res) {
			return this.$onShareTimeline()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
	}
</script>
<style lang="scss" scoped>
	.container {

		.main {
			.content {
				padding-bottom: 150rpx;
				width: 750rpx;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;

				.host-main {
					padding: 0 28rpx;
					box-sizing: border-box;
				}
			}
		}
	}
</style>